<script setup>
import { onMounted } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
// star 和 end 第一个参数 是针对元素本身，第二个参数是针对滚动开始和结束的位置线条（针对视口的位置）， start滚动到scroll-start位置开始动画，end到scroll-end位置结束动画，如果一开始start 就超过scroll-start位置则元素位置会提前发生变化
// start的默认值是top bottom
// end的默认值的bottom top
// 他们的第二个参数可以自定义
gsap.registerPlugin(ScrollTrigger)
onMounted(() => {
  // 第一屏
  gsap.to('.box0-el', {
    width: 200
  })
  // 第一屏
  ScrollTrigger.create({
    trigger: '.box1',
    scrub: true,
    start: 'top top',
    end: '+=100%',
    pin: true,
    animation: gsap
      .timeline()
      .fromTo('.box0', { y: 0 }, { y: -window.innerHeight })
      .to('.one-text', { y: '-50%' })
  })
  // 第二屏
  ScrollTrigger.create({
    trigger: '.box2',
    scrub: true,
    start: 'top top',
    end: '+=100%',
    pin: true,
    onEnter: () => {
      gsap.to('.box2-text', {
        y: 100
      })
    },
    // 动画同时进行
    animation: gsap.timeline().to('.box2-text', { y: -400 })
  })
  // 第三屏
  ScrollTrigger.create({
    trigger: '.box3',
    scrub: true,
    start: 'top top',
    end: '+=100%',
    pin: true,
    animation: gsap.timeline().to('.three-text', { y: '-50%' })
  })
  // 第四屏
  ScrollTrigger.create({
    trigger: '.box4',
    scrub: true,
    start: 'top top',
    end: '+=100%',
    pin: true,
    animation: gsap
      .timeline()
      .from('.four-text', { height: '10px', width: '100vw' }, '<')
      .from('.four-text-2', { x: '100%', opacity: 0 }, '<')
      .from('.four-text-1', { x: '100%', opacity: 0 }, '<')
  })
  // 第五屏
  ScrollTrigger.create({
    trigger: '.box5',
    scrub: true,
    start: 'top top',
    end: '+=100%',
    pin: true,
    onEnter: () => {},
    animation: gsap.timeline().to('.five-text', { width: '100vw', height: '100vh' }, '<')
  })
})
</script>

<template>
  <div class="w-[100%]">
    <div
      class="box0 w-[100%] h-[100vh] border-[#222] border-b bg-[#000] absolute top-0 left-0 z-10 text-white overflow-hidden hidden"
    >
      <div class="absolute z-10 top-[20%] logo-img flex flex-col items-center justify-center">
        <img
          class="h-[200px]"
          src="https://res.insta360.com/static/infr_base/9cdc48888befe0bda8ad0aec7b6085c3/Insta360%20X3_Logo&Slogan_Online_White_SC.svg"
          alt=""
        />
        <div class="w-[300px] h-[56px] rounded-[30px] overflow-hidden">
          <div
            class="absolute z-[99] w-[300px] h-[56px] text-[24px] flex justify-center items-center cursor-pointer"
          >
            介绍视频
          </div>
          <video
            src="https://media.insta360.com/static/infr_base/6f2cdbb854314d0c60ac84371a9ead63/preview3.mp4"
            autoplay
            loop
            muted
          ></video>
        </div>
      </div>
      <video
        src="https://media.insta360.com/static/799499c95da727e1f88d156290987e5f/X3K2V-169.mp4"
        autoplay
        muted
      ></video>
    </div>
    <div class="box1 w-[100%] h-[100vh] bg-[#000] flex border-[#222] border-b overflow-hidden">
      <div class="w-[600px]">
        <video
          autoplay
          muted
          src="https://media.insta360.com/static/2ab4a7d6c45cd22ccfb55d754959a593/a.mp4"
        ></video>
      </div>
      <div class="flex-1 ml-[200px] h-[100vh] overflow-hidden">
        <div class="one-text">
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[36px]">5.7K 全景拍摄</div>
            <div class="text-[30px]">“视”界， 不止眼前。</div>
            <div>
              X3 可拍摄震撼人心的 5.7K 全景视频，360°
              全方位记录，不错过任何精彩瞬间。充分释放影像创造力，为你带来无限可能。
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4"
            ></video>
          </div>
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[18px] text-[#5f98d6]">重取景</div>
            <div class="text-[30px]">先拍摄， 后取景。</div>
            <div>
              全景视频可通过 Insta360 App
              中的AI智能工具进行剪辑，后期自由取景，随心构图，轻松解锁创意大片。轻轻一点，即可分享，画质无任何损失，让你的社交平台更出彩
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/9567b5fe9ec99fbb4b772b6f7e9a2470/Reframing_cn.mp4"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <div class="box2 w-[100%] h-[100vh] bg-[#000] border-[#222] border-b overflow-hidden">
      <video
        muted
        autoplay
        src="https://media.insta360.com/static/4126ddf28d98d007157da8b39e8dbd4e/SENSOR_pc.mp4"
        class="w-[100%] h-[100%] object-fill"
      ></video>
      <div class="absolute w-full h-full top-0 left-[-100px] z-[99] flex overflow-hidden">
        <div
          class="box2-text space-y-[20px] h-[100vh] w-[100%] flex flex-col items-center justify-center text-white"
        >
          <div class="text-[40px] font-bold">我是第一屏</div>
          <div class="text-[30px]">囊括天地， 细节尽显。</div>
          <div>
            超越过往，超乎想象。全景照片现在能以惊人的 7200 万像素呈现更丰富的细节，360°
            高清记录当下所有景象。
          </div>
        </div>
      </div>
    </div>
    <div class="box3 w-[100%] h-[100vh] bg-[#000] border-[#222] border-b overflow-hidden flex">
      <div class="flex-1 h-[100vh] overflow-hidden">
        <div class="three-text flex flex-col items-center">
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[36px]">第一人称视角</div>
            <div class="text-[30px]">4k超清呈现</div>
            <div>
              平面全景，合二为一。开启任意一侧单镜头，X3 可拍摄最高 4K 30fps 的超清广角视频或 2.7K
              170° 的极广角画面，相当于同时拥有一台广角运动相机，满足多元场景拍摄需求
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/29da40c4ab23bbad0b907b4867d13721/360_video.mp4"
            ></video>
          </div>
          <div class="space-y-[20px] h-[100vh] w-[560px] flex flex-col justify-center text-white">
            <div class="text-[18px] text-[#5f98d6]">跟拍模式</div>
            <div class="text-[30px]">60fps 跟拍大片</div>
            <div>
              拍广角视频也能让自拍杆隐形？试试全新的跟拍模式。支持以 60fps
              的高帧率，拍出精彩绝伦的第三人称视角大片，仿佛摄影师在跟拍。后期无需重新取景，剪辑更轻松
            </div>
            <video
              class="w-[560px] h-[315px] object-fill rounded-2xl"
              muted
              autoplay
              src="https://media.insta360.com/static/infr_base/7b36682f766564eb5b5bd85ef8958164/Me%20mode.mp4"
            ></video>
          </div>
        </div>
      </div>
      <div class="w-[600px] mr-[200px]">
        <video
          autoplay
          muted
          src="https://media.insta360.com/static/5bd315cc50970dcc465ccbd1fb464c1b/b.mp4"
        ></video>
      </div>
    </div>
    <div
      class="box4 w-[100%] text-white h-[100vh] bg-[#000] border-[#222] border-b overflow-hidden flex justify-center items-center"
    >
      <div class="space-y-[25px]">
        <div class="text-[36px] w-[864px] mx-auto four-text-1">360° 水平矫正</div>
        <div class="w-[864px] four-text h-[468px] mx-auto rounded-xl overflow-hidden">
          <video
            autoplay
            muted
            loop
            class="w-full h-full object-fill"
            src="https://media.insta360.com/static/infr_base/6eff9a1da13d36867a61b83c8c9378f8/Horizon_lock.mp4"
          ></video>
        </div>
        <div class="w-[864px] mx-auto four-text-2">
          运动相机防抖性能，再上新高度。有了 360°
          水平矫正功能，无论相机如何翻转，拍摄画面始终保持水平。
        </div>
      </div>
    </div>
    <div
      class="box5 w-[100%] h-[100vh] bg-[#000] border-[#222] border-b overflow-hidden flex justify-center items-center"
    >
      <div class="w-[1048px] h-[601px] rounded-xl five-text">
        <video
          muted
          autoplay
          loop
          class="w-full h-full object-fill"
          src="https://media.insta360.com/static/infr_base/c046de75c04a5f5526b7aa72c6473bba/8K%20timelapse.mp4"
        ></video>
      </div>
    </div>
  </div>
</template>
